<template>
  <div>

    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <School :getSchoolName="getSchoolName"/>
    <hr>

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法：v-on或者@） -->
<!--    <Student v-on:getStudentName="getStudentName"/>-->
<!--    <Student @getStudentName="getStudentName"/>-->

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法：使用ref写法 -->
    <Student ref="student" @click.native="show"/>

  </div>
</template>

<script>
  import School from "@/components/School";
  import Student from "@/components/Student";
  // 创建App组件
  export default {
    name:'App',
    components:{School, Student},
    methods:{
      getSchoolName(name){
        console.log('App收到了学校名称',name)
      },
      getStudentName(name,...params){// 可以传递多个参数
        console.log('App收到了学生姓名',name)
        console.log(name,params)
      },
      show(){
        alert(123)
      }
    },
    mounted() {
      setTimeout(()=>{
        this.$refs.student.$on('getStudentName', this.getStudentName)
      },3000)
    }
  }
</script>